<template>
  <div class="screen">
    <header>
      <div class="header-left">
        <img src="@/assets/newBigdata/fanhui.png" alt="" class="" @click="goBack" />
        <p>{{ currentDate }}</p>
      </div>
      <div class="header-center">
        <p>校园食安监管大屏</p>
        <img src="@/assets/screen/topbg.png" alt="" class="header-bg">
      </div>
      <div>
        <weather></weather>
      </div>
    </header>
    <el-container>
      <el-aside width="440px">
        <screenTitle title="食安检测"></screenTitle>
        <vueSeamlessScroll  :data="detectionList" class="detection" :class-option="optionSetting(60)">
          <div class="detection-item" v-for="(item, index) in detectionList" :key="item.name">
            <div class="flex">
              <div class="flex-center">
                <div class="detection-item-index">TOP{{ index + 1 }}</div>
                <p class="mg-l-20">{{ item.name }}</p>
              </div>
              <div class="flex-center">
                <p class="mg-r-30">{{ item.num }}</p>
                <p>{{ item.scale }}</p>
              </div>
            </div>
            <el-progress color="#25B2C2" :percentage="item.scale" :show-text="false"></el-progress>
          </div>
        </vueSeamlessScroll>
        <screenTitle title="订单配送" class="mg-t-30"></screenTitle>
        <div id="lineChart"></div>
        <screenTitle title="商品排行" class="mg-t-30"></screenTitle>
        <vueSeamlessScroll :data="detectionList" class="product" :class-option="optionSetting(63)">
          <div class="product-item" v-for="(item, index) in productList" :key="item.name">
            <div class="product-item-index">{{ index < 9 ? '0' + (index + 1) : index + 1 }}</div>
            <p class="product-item-name">{{ item.name }}</p>
            <el-progress :class="{ small: item.scale < 30 }" :percentage="item.scale" :show-text="false"></el-progress>
            <p class="mg-l-30">{{ item.num }}</p>
          </div>
        </vueSeamlessScroll>
      </el-aside>
      <el-main>Main</el-main>
      <el-aside width="440px">
        <screenTitle title="实时订单"></screenTitle>
        <div class="order-list-item mg-t-20">
          <p class="oli-index">序号</p>
          <p class="oli-user">用户</p>
          <p class="oli-gys">供应商</p>
          <p class="oli-total">数量</p>
        </div>
        <vueSeamlessScroll :data="orderList" class="order-list" :class-option="optionSetting(50)">
          <div class="order-list-item mg-t-10" v-for="(item, index) in orderList" :key="index">
            <p class="oli-index special">
              <img src="~@/assets/screen/sjx.png" alt="">
              {{ index < 9 ? '0' + (index + 1) : index + 1 }}
            </p>
            <p class="oli-user">{{ item.name }}</p>
            <p class="oli-gys">{{ item.gys }}</p>
            <p class="oli-total">{{ item.total }}</p>
          </div>
        </vueSeamlessScroll>
        <screenTitle title="学校排行" class="mg-t-30"></screenTitle>
        <div id="barChart"></div>
        <screenTitle title="供应商排行" class="mg-t-30"></screenTitle>
        <vueSeamlessScroll :data="orderList" class="supplier" :class-option="optionSetting(50)">
          <div class="supplier-item" v-for="(item, index) in supplierList" :key="index">
            <div class="flex">
              <p class="supplier-item-index">{{ index < 9 ? '0' + (index + 1) : index + 1 }}</p>
              <p>{{ item.name }}</p>
            </div>
            <p>{{ item.total }}</p>
          </div>
        </vueSeamlessScroll>
      </el-aside>
    </el-container>
  </div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import dayjs from 'dayjs';
import "dayjs/locale/zh-cn"; // 导入中文语言包
dayjs.locale("zh-cn");
import screenTitle from './components/title.vue'
import echarts from "echarts";
import weather from './components/weather.vue' 
import { indexData, barOption, lineOption } from './MockData'
const { detectionList, productList, orderList, supplierList, barChartData, lineChartData } = indexData
export default {
  name: "Screen",
  components: { screenTitle, vueSeamlessScroll, weather },
  data() {
    return {
      timer: null,
      currentDate: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss dddd"),
      detectionList,
      productList,
      orderList,
      supplierList,
      myChart: null,
      barChartData,
      lineChartData,
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.currentDate = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss dddd");
    }, 1000);
    this.setOptions(barOption(this.barChartData), 'barChart', this.barChartData.data)
    this.setOptions(lineOption(this.lineChartData), 'lineChart', this.lineChartData.data)
  },
  computed:{
    //控制滚动属性
    optionSetting(){
      return singleHeight => {
        return {
          step: 0.4, // 数值越大速度滚动越快
          limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          autoPlay: true, // 是否自动滚动
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 3000 // 单步运动停止的时间(默认值1000ms)
        }
      }
    },
  },
  methods: {
    setOptions (option, dom, data) {
      let myChart = echarts.init(document.getElementById(dom));
      let timer = null ;
      myChart.clear();
      clearInterval(timer);
      // 使用刚指定的配置项和数据显示图表。
      timer = setInterval(function () {
        // 每次向后滚动一个，最后一个从头开始。
        if (option.dataZoom[0].endValue == data.length - 1) {
          option.dataZoom[0].endValue = 4;
          option.dataZoom[0].startValue = 0;
        }
        else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        }
        myChart.setOption(option,true);
      }, 2000);
      myChart.clear();
      myChart.setOption(option,true);
      // 监听屏幕变化自动缩放图表
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    goBack() {
      this.$router.back(-1)
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>
<style lang="scss" scoped>
  @import './index.scss';
</style>